<template>
  <div class="repairs">
    <el-form :model="form" :rules="rules" ref="form" label-width="80px" class="repair-form">
      <h2 class="form-title">设备报修</h2>
      
      <el-form-item label=" 报 修 人：" prop="userId" label-width="100px">
        <el-input v-model="form.realName" maxlength="10" readonly>
          <template slot="prefix">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="联系电话：" prop="phone" label-width="100px">
        <el-input v-model="form.phone" maxlength="11">
          <template slot="prefix">
            <i class="el-icon-phone"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label=" 宿 舍 号：" prop="dormNum" label-width="100px">
        <el-input v-model="form.dormNum">
          <template slot="prefix">
            <i class="el-icon-house"></i>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="电脑类型：" prop="pcType" label-width="100px">
        <el-radio-group v-model="form.pcType">
          <el-radio label="1">笔记本</el-radio>
          <el-radio label="2">台式电脑</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="电脑品牌：" prop="pcName" label-width="100px">
        <el-input v-model="form.pcName"></el-input>
      </el-form-item>

      <el-form-item label="报修原因：" prop="reason" label-width="100px">
        <el-input type="textarea" v-model="form.reason"></el-input>
      </el-form-item>

      <el-form-item label="报修图片：" prop="fileList" label-width="100px">
        <el-upload
          class="avatar-uploader"
          :action="$baseUrl + '/files/upload'"
          :headers="{ token: user.token }"
          list-type="picture-card"
          :on-success="handleAvatarSuccess"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
        </el-upload>
      </el-form-item>

      <div class="form-buttons">
        <el-button type="primary" @click="submitForm" :loading="loading">
          <i class="el-icon-check"></i> 提 交
        </el-button>
        <el-button @click="clearForm">
          <i class="el-icon-refresh"></i> 重 置
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      form: {
        realName: '',
        phone: '',
        dormNum: '',
        pcName: '',
        pcType: '',
        reason: '',
        fileList: []
      },
      rules: {
        realName: [
          { required: true, message: '请输入报修人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        dormNum: [
          { required: true, message: '请输入宿舍号', trigger: 'blur' }
        ],
        pcType: [
          { required: true, message: '请输入电脑类型', trigger: 'blur' }
        ],
        pcName: [
          { required: true, message: '请输入电脑品牌', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入报修原因', trigger: 'blur' }
        ]
        // fileList: [
        //   { required: true, message: '请上传报修图片', trigger: 'change' }
        // ]
      },
      loading: false
    };
  },
  methods: {
    submitForm() {
      this.$confirm('确定提交吗？', '提示', {type: 'warning'}).then(() => {
        this.loading = true;
        this.$request.post('/repairInfo/add', this.form).then(response => {
          if (response.code === '200') {
            this.$message.success('提交成功');
            this.clearForm();
          } else {
            this.$message.error(response.msg);
          }
        }).finally(() => {
          this.loading = false;
        })
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.form, 'imgUrl', response.data)
    },
    clearForm() {
      this.$refs.form.resetFields();
    },
  },
  created() {
    // 获取报修人员信息
    const user = JSON.parse(localStorage.getItem('xm-user'))
    this.form.userId = user.id
    // 获取用户信息
    this.$request.get('/userInfo/selectById/'+this.user.id).then(res => {
      if (res.code === '200') {
        if(res.data.realName!=null){
          this.form.realName = res.data.realName
          this.form.phone = res.data.phone
          this.form.dormNum = res.data.dormnum
        }else {
          this.$message.error('请先完善个人信息')
          this.$router.push('/front/person')
        }
      }
    })
  }
};
</script>

<style scoped>
.repairs {
  min-height: 81vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.repair-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 30px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.repair-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.repair-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.repair-form:hover::before {
  transform: scaleX(1);
}

.form-title {
  text-align: center;
  color: #409EFF;
  margin-bottom: 30px;
  font-weight: 600;
  font-size: 24px;
  position: relative;
}

.form-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.repair-form:hover .form-title::after {
  width: 100px;
}

.el-form-item {
  margin-bottom: 20px;
  opacity: 0;
  animation: slideUp 0.5s ease forwards;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.el-form-item:nth-child(2) { animation-delay: 0.1s; }
.el-form-item:nth-child(3) { animation-delay: 0.2s; }
.el-form-item:nth-child(4) { animation-delay: 0.3s; }
.el-form-item:nth-child(5) { animation-delay: 0.4s; }
.el-form-item:nth-child(6) { animation-delay: 0.5s; }
.el-form-item:nth-child(7) { animation-delay: 0.6s; }

.el-input, .el-textarea {
  transition: all 0.3s ease;
}

.el-input:hover, .el-textarea:hover {
  transform: translateX(5px);
}

.el-input:focus-within, .el-textarea:focus-within {
  transform: translateX(5px) scale(1.02);
}

.el-radio {
  transition: all 0.3s ease;
}

.el-radio:hover {
  transform: translateX(5px);
}

.form-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  opacity: 0;
  animation: fadeIn 0.5s ease 0.7s forwards;
}

.el-button {
  padding: 12px 30px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.el-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.el-button:hover::before {
  width: 300px;
  height: 300px;
}

.el-button [class^="el-icon-"] {
  margin-right: 5px;
  transition: transform 0.3s ease;
}

.el-button:hover [class^="el-icon-"] {
  transform: scale(1.2) rotate(360deg);
}

.avatar-uploader {
  transition: all 0.3s ease;
}

.avatar-uploader:hover {
  transform: translateY(-3px);
}

.avatar-uploader-icon {
  transition: all 0.3s ease;
}

.avatar-uploader:hover .avatar-uploader-icon {
  transform: rotate(180deg);
  color: #409EFF;
}

.el-upload__tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.el-upload:hover .el-upload__tip {
  opacity: 1;
}

@media (max-width: 768px) {
  .repair-form {
    margin: 10px;
    padding: 20px;
  }
  
  .form-buttons {
    flex-direction: column;
  }
  
  .el-button {
    width: 100%;
    margin: 5px 0;
  }
}
</style>